<template>
  <div class="supervision-center">
    <div class="MidTitle">
      <span
        >基财e码通驾驶舱-资金监管
        <!-- <span style="color: #f6bd16;">(浙江省)</span> -->
        <el-select v-model="areaValue" placeholder="请选择" @change="gotoArea">
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
    </div>
    <div class="MidTop">
      <div class="MidtopCon">
        <div v-for="(item, index) in midTopList" :key="index" class="MidTopBtn">
          <!-- <span class="MidTopBtn-titleM">{{ item.titleM }}:&nbsp;&nbsp;</span> -->
          <span>{{ item.num }}</span>
          <p>{{ item.title }}</p>
        </div>
      </div>
        <span class="timeData">{{ gettime }} {{ week }}</span>
      <div class="danwei">单位：万元</div>
    </div>
    <div class="MidMap">
      <div style="height:100%">
         <div class="mapTitle">整体风险评价</div>
        <map-echarts />
      </div>
    </div>
    <div class="MipTable">
      <!-- <div class="title">按月份风险统计数量</div> -->
      <!-- <VEcharts
        autoresize
        :options="option.options"
        style="width: 100%; height: 90%"
      /> -->
      <left-item
        style="width:48%"
        v-for="(item, index) in list"
        :key="index"
        :item="item"
      />
    </div>
  </div>
</template>

<script>
import MapEcharts from "./mapecharts";
import VEcharts from "@/components/vecharts";
import LeftItem from "./LeftItem";
export default {
  components: {
    VEcharts,
    MapEcharts,
    LeftItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      midTopList: [
        {
          num: "1331984.56",
          title: "资金",
          titleM: "公示率"
        },
        {
          num: "258445.49",
          title: "资产",
          titleM: "监管率"
        },
        {
          num: "-",
          title: "资源",
          titleM: "巡查率"
        }
      ],
      option: {
        title: "六大经济活动",
        options: {
          // title: {
          // text: '按月份风险统计数量',
          // subtext: '单位: 万元',
          // x: 100
          // },
          xAxis: {
            type: "category",
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ]
            // axisLine: {// x轴样式
            //   show: true,
            //   lineStyle: {
            //     color: '#00c7ff',
            //     width: 1,
            //     type: 'solid'
            //   }
            // }
            // splitLine: {
            //   show: false
            // }
          },
          yAxis: {
            type: "value",
            // 去掉横向网格线
            splitLine: {
              show: false
            }
          },
          tooltip: {
            // 鼠标滑上去显示效果
            trigger: "item"
          },
          grid: {
            show: false, // 是否显示直角坐标系网格
            top: 20, // 相对位置 top\bottom\left\right
            bottom: 30,
            left: 40,
            right: 40
            // containLabel: false // gird 区域是否包含坐标轴的刻度标签
            // tooltip: {
            //   show: true,
            //   trigger: 'item', // 触发类型
            //   textStyle: {
            //     color: '#666'
            //   }
            // }
          },
          series: [
            {
              data: [60, 70, 10, 80, 70, 75, 65, 12, 0, 0, 0, 0],
              // data: this.mouthData,
              type: "bar",
              itemStyle: {
                normal: {
                  // 柱子颜色
                  color: ["#0C657D"]
                }
              }
            }
          ]
        }
      },
      areaOptions: [
        {
          label: "浙江省",
          value: 1
        },
        {
          label: "绍兴市",
          value: 2
        },
        {
          label: "柯桥区",
          value: 3
        },
        {
          label: "齐贤街道",
          value: 4
        }
      ],
      areaValue: 1,
      gettime: "",
      week: "",
      timer:''
      // colorArr: ['#9F2115', '#c1c919', '#37ca61']
    };
  },
    created() {
    this.getTime();
  },
  methods: {
    gotoArea(val) {
      if (val === 1) {
        this.$router.push("/largeScreen1");
      } else if (val === 2) {
        this.$router.push("/largeScreen2");
      } else if (val === 3) {
        this.$router.push("/largeScreen3");
      } else if (val === 4) {
        this.$router.push("/largeScreen4");
      }
    },
       gohome() {
      this.$router.push("/");
    },
    getTime() {
      let yy = new Date().getFullYear();
      let mm = this.getAddO(new Date().getMonth() + 1);
      let dd = this.getAddO(new Date().getDate());
      let hh = this.getAddO(new Date().getHours());
      let mf = this.getAddO(new Date().getMinutes());
      // let ss = this.getAddO(new Date().getSeconds());
      this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf;
      const wk = new Date().getDay();
      const weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      this.week = weeks[wk];
      this.timer=setTimeout(()=>{this.getTime()},10000)
    },
     getAddO(a) {
      return a < 10 ? "0" + a : a;
    },
  },
  beforeDestroy(){
    clearTimeout(this.timer)
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.supervision-center {
  padding: px2vw(20px) 0;
}
.MidTitle {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  /deep/.el-input__inner {
    background: transparent;
    border-color: transparent;
    color: #f6bd16;
    font-size: px2vw(32px);
    width: px2vw(200px);
  }
  span {
    font-size: px2vw(32px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
.MidTop {
  height: 8%;
  margin-top: px2vw(42px);
  display: flex;
  justify-content: center;
  position: relative;
  .timeData{
     position: absolute;
    color: #1fd2ff;
    right: 10%;
    top: -66%;
    font-size: px2vw(14px);
   }
  .danwei {
    position: absolute;
    color: #1fd2ff;
    right: 10%;
    top: -40%;
    font-size: px2vw(14px);
  }
  .MidtopCon {
    width: 66%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .MidTopBtn {
      width: 32%;
      height: 100%;
      background-image: url("~@/assets/images/fullscreen/MidTop.png");
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: px2vw(24px);
        padding-top: 2%;
        font-family: LiquidCrystal, LiquidCrystal-Regular;
        font-weight: 400;
        color: #f6bd16;
        text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
      }
      p {
        margin: 0;
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
        position: absolute;
        top: -30%;
        left: 50%;
        transform: translateX(-50%);
      }
      .MidTopBtn-titleM {
        color: #1fd2ff;
      }
    }
  }
}
.MidMap {
  height: 55%;
  position: relative;
  .mapTitle {
    position: absolute;
    color: #fff;
    font-size: 20px;
    right: 8%;
    bottom: 125px;
  }
  .mapAll {
    display: flex;
    align-items: center;
    position: absolute;
  }
  .mapBox {
    width: px2vw(18px);
    height: px2vw(18px);
    display: inline-block;
    border-radius: 2px;
  }
  span {
    font-size: px2vw(16px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #ffffff;
    margin-left: px2vw(12px);
    display: inline-block;
  }
  .mapBot {
    width: px2vw(185px);
    height: px2vw(144px);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("~@/assets/images/fullscreen/状态球备份.png");
    background-size: 100% 100%;
    span {
      font-size: px2vw(34px);
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #e9d500;
      text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    }
    p {
      margin: 0;
      position: absolute;
      left: 50%;
      bottom: -12%;
      transform: translateX(-50%);
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #1fd2ff;
    }
  }
}
.MipTable {
  height: calc(37% - 87px);
  // background-image: url('~@/assets/images/fullscreen/longKuang.png');
  // background-size: 100% 100%;
  // padding: 10px;
  display: flex;
  justify-content: space-between;
  .title {
    padding-left: 20px;
    height: 10%;
    color: #1fd2ff;
    font-size: 18px;
  }
}
</style>
